<template>
	<div class="main_div">
		<div class="info_div">
			<div>
				<el-upload
				  :action="uploadUrl"
				  :show-file-list="false"
				  :on-success="uploadSuccess">
					<el-image
					    class="img_cls"
					    :src="header"
					    fit="cover"></el-image>
				</el-upload>
			</div>
			<div>
				<table class="table_cls">
					<tr>
						<td>账号</td>
						<td><el-input v-model="form.username" placeholder="请输入账号"></el-input></td>
					</tr>
					<tr>
						<td>密码</td>
						<td><el-input show-password v-model="form.password" placeholder="请输入密码"></el-input></td>
					</tr>
					<tr>
						<td>昵称</td>
						<td><el-input v-model="form.nickname" placeholder="请输入昵称"></el-input></td>
					</tr>
					<tr>
						<td>邮箱</td>
						<td><el-input v-model="form.email" placeholder="请输入邮箱"></el-input></td>
					</tr>
				</table>
			</div>
			<div style="margin: 20px; display: flex;">
				<el-button type="primary" class="login_btn" @click="register()">注册用户</el-button>
				<el-button type="warning" class="login_btn" @click="$router.push('/')">去登陆</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				header: require("../assets/header.png"),
				uploadUrl: this.$.host + "/file/upload",
				form: {
					username: "",
					password: "",
					nickname: "",
					email: "",
					header: ""
				}
			}
		},
		methods: {
			goPage(url) {
				this.$router.push(url);
			},
			//上传的回调
			uploadSuccess(resp){
				//回显头像
				this.header = this.$.getImg(resp);
				//设置上传的图片名称
				this.form.header = resp;
			},
			//注册用户信息
			register(){
				this.$.ajax({
					type: "POST",
					url: "/user/register",
					data: this.form,
					success: (data) => {
						//成功
						this.$message({
							message: "恭喜你，注册成功！",
							type: "success"
						});
						
						//跳转到登录页面
						this.$router.push("/");
					}
				});
				
				// this.axios({
				// 	method: "POST",
				// 	url: this.$.host + "/user/register",
				// 	data: this.form
				// }).then((result) => {
				// 	//获取服务器的返回结果
				// 	var r = result.data;
				// 	console.log(r);
					
				// 	//获得code值
				// 	if(r.code == 200) {
				// 		//成功
				// 		this.$message({
				// 			message: "恭喜你，注册成功！",
				// 			type: "success"
				// 		});
						
				// 		//跳转到登录页面
				// 		this.$router.push("/");
						
				// 	} else if(r.code == 409) {
				// 		//参数校验异常
				// 		var errs = r.data;
				// 		this.$message({
				// 			message: errs[0],
				// 			type: "error"
				// 		})
				// 	}
					
				// }).catch((result) => {
					
				// });
			}
		}
	}
</script>

<style>
	.main_div {
		width: 100%;
		height: 100%;
		background-color: cadetblue;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.info_div {
		width: 400px;
		height: auto;
		background-color: aliceblue;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	
	.img_cls {
		width: 100px;
		height: 100px;
		border-radius: 50px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		margin-top: -60px;
		background-color: white;
	}
	
	.table_cls tr td {
		padding: 10px 10px;
	}
	
	.login_btn {
		width: 100px;
	}
	
	.botton_div {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		color: gray;
		font-weight: 900;
		margin-top: 10px;
	}
</style>